<template>
	<view class="shop-body">
		<u-sticky offset-top="0" zIndex="100" style="height: 0;">
			<view style="display: flex;background-color: #fff;padding: 0 20rpx;">
				<u-tabs :list="tabs" @click="tabsClick" style="width: 50%;"></u-tabs>
				<u-search :show-action="true" actionText="搜索" @custom="search" placeholder="产品名称"
					:animation="true"></u-search>
			</view>
			<u-gap height="1" bgColor="#eee"></u-gap>
		</u-sticky>
		<view class="shop-index">
			<view class="shop-index-left">
				<u-list @scrolltolower="scrolltolowerLeft">
					<u-gap height="100"></u-gap>
					<u-list-item v-for="(item, index) in leftList" :key="index">
						<u-cell :border="false" @click="cateTap(index,item)" :style="cateTapIndex == index?'':'background: #f3f3f3'">
							<!-- 							<template #icon>
								<u-avatar shape="square" size="35" :src="item.image"
									customStyle="margin: -3px 5px -3px 0"></u-avatar>
							</template> -->
							<template #title>

								<view style="position: relative;">
									<view>
										{{item.name}}
									</view>
									<view v-if="item.cartNum"
										style="position: absolute;top: 0rpx;right: -40rpx;z-index: 9;">
										<up-badge max="99" :value="item.cartNum"></up-badge>
									</view>
								</view>

							</template>
						</u-cell>
					</u-list-item>
					<u-gap height="150"></u-gap>
				</u-list>
			</view>
			<view class="shop-index-right">
				<u-list @scrolltolower="scrolltolowerRight">
					<u-gap height="100"></u-gap>
					<u-list-item v-for="(item, index) in rightList" :key="index">
						<u-cell v-if="cateTapItem.id == item.cateId">
							<template #icon> <u-avatar shape="square" size="180" :src="item.image"
									customStyle="margin: -3px 5px -3px 0"></u-avatar>
							</template>
							<template #title>
								<view>{{item.name}}</view>
								<view>{{item.name}}</view>
								<view style="color: #ff0000;">￥ <text style="font-size: 1.2em;">{{item.price}}</text>
								</view>
								<!-- <u-number-box v-model="item.value"></u-number-box> -->
								<u-number-box v-model="item.cartNum" :name="index" @change="tapNumChange" :min="0"
									:disableMinus="item.cartNum == 0">
									<template #minus>
										<view class="minus" :class="item.cartNum?'minus-ok':''">
											<u-icon name="minus" :color="item.cartNum?'':'#FFFFFF'" size="12"></u-icon>
										</view>
									</template>
									<template #input>
										<text style="width: 50px;text-align: center;"
											class="input">{{item.cartNum}}</text>
									</template>
									<template #plus>
										<view class="plus">
											<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
										</view>
									</template>
								</u-number-box>
							</template>
						</u-cell>
					</u-list-item>
					<u-gap height="150"></u-gap>
				</u-list>
			</view>
		</view>
		<view class="shop-car-btn">
			<view class="shop-car-btn-content">
				<view class="shop-car-btn-icon">
					<view style="position: absolute;top: 20rpx;left: 120rpx;z-index: 1;">
						<up-badge max="99" :value="cartData.count"></up-badge>
					</view>
					<view class="">
						<u-icon name="shopping-cart" color="#ffdd00" size="120"></u-icon>
					</view>
				</view>
				<view class="shop-car-btn-left">

					<view class="shop-car-btn-price">
						￥{{cartData.price}}
					</view>
					<view class="shop-car-btn-tip" v-if="deliveryFee">
						预估派送费￥{{deliveryFee}}
					</view>

				</view>
				<view class="shop-car-btn-right">
					去结算
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	var tabsTm = [{
		name: '商品',
	}, {
		name: '评价',
	}, {
		name: '商家'
	}]
	const tabs = reactive(tabsTm)
	// tabs = tabsTm
	const product = {
		id: 1,
		name: "糖果",
		cateId: 1,
		image: 'https://cdn.uviewui.com/uview/album/',
		price: 10,
	};
	const cate = {
		id: 1,
		name: "早餐",
		image: 'https://cdn.uviewui.com/uview/album/',
	}
	// 右面的商品列表
	const rightList = reactive([]);
	// 左面的类目列表
	const leftList = ref([]);
	// 选中的类目索引
	const cateTapIndex = ref()
	// 选中的类目内容
	const cateTapItem = ref({})
	// 派送费
	const deliveryFee =ref(0)
	const cartData = reactive({
		price: 0,
		count: 0,
		products: []
	});
	const cateTap = (e, item) => {
		console.log(e)
		cateTapIndex.value = e
		cateTapItem.value = {
			...item
		}
	}
	const tapNumChange = (e) => {
		var idx = e.name
		var cartNum = e.value
		var item = rightList[idx]
		var count = 0
		var price = 0
		var products = cartData.products.filter(e => {
			if (e.id != item.id) {
				count = count + e.cartNum
				price = e.price * count
				return e
			}
		})
		if (cartNum != 0) {
			products.push({
				...item,
				cartNum: cartNum
			})
		}
		var cateList = leftList.value.filter(c => {
			c.cartNum = 0
			products.filter(e => {
				if (c.id == e.cateId) {
					c.cartNum = c.cartNum + e.cartNum
				}
			})
			return c
		})
		leftList.value = cateList
		cartData.products = products
		cartData.count = count + cartNum
		cartData.price = price + cartNum * item.price
		// console.log(cartData)
	}
	const search = (e) => {
		console.log(e)
	}
	const tabsClick = (e) => {
		console.log(e)
	}
	const leftLoadmore = () => {
		for (let i = 0; i < 10; i++) {
			var prod = {
				...cate
			}
			prod.id = prod.id + i
			prod.price = prod.price + i
			prod.image = prod.image + i + ".jpg"
			prod.name = prod.name + i
			leftList.value.push({
				...prod,
				// url: urls[uni.$u.random(0, urls.length - 1)],
			});
		}
	};
	const rightLoadmore = () => {
		for (let i = 0; i < 10; i++) {
			var prod = {
				...product
			}
			prod.id = prod.id + i
			prod.price = prod.price + i
			prod.name = prod.name + i
			prod.image = prod.image + i + ".jpg"
			prod.cateId = prod.id
			rightList.push({
				...prod,
			});
		}
	};
	const scrolltolowerLeft = () => {
		console.log("xxxx")
		// leftLoadmore();
	};

	const scrolltolowerRight = () => {
		// rightLoadmore();
	};
	leftLoadmore();
	rightLoadmore();
</script>

<style lang="scss" scoped>
	@import "./list.scss"
</style>